<template>
  <view class="container">
    <u-navbar
      :is-fixed="true"
      :border-bottom="false"
      :is-back="true"
      :background="{ background: '#fff' }"
      title="地址管理"
      title-color="#000"
    >
    </u-navbar>
    <u-toast ref="uToast" />
    <view class="content">
      <u-form :model="form" ref="uForm" :label-width="150">
        <u-form-item label="姓名"
          ><u-input v-model="form.name" placeholder="请输入姓名"
        /></u-form-item>
        <u-form-item label="手机号" prop="phone"
          ><u-input v-model="form.phone" placeholder="请输入手机号"
        /></u-form-item>
        <u-form-item label="详细地址"
          ><u-input v-model="form.address" placeholder="请输入地址"
        /></u-form-item>
      </u-form>
    </view>
    <button class="submit" @click="doAdd">提交</button>
  </view>
</template>

<script>
import { updateUser } from "../../api/system/api";
import moment from "moment";
export default {
  data() {
    return {
      action: "http://127.0.0.1:3000/upload",
      fileList: [],
      form: {
        name: "",
        phone: "",
        address: "",
      },
      userInfo: {},
      previewImg: false,
      curIndex: 0,
      isEdit: false
    };
  },
  onLoad(option) {
    console.log(option)
    this.isEdit = option.type
    if (option.index) {
      this.curIndex = Number(option.index)
      this.form = JSON.parse(option.data)
    }
  },
  created() {
    uni.getStorage({
      key: "userInfo",
      success: (res) => {
        this.userInfo = res.data;
      },
    });
  },
  methods: {
    doAdd() {
      if (!this.form.name) {
        this.$refs.uToast.show({
          title: "请输入姓名",
          type: "error",
        });
        return;
      }
      if (!this.form.phone) {
        this.$refs.uToast.show({
          title: "请输入电话",
          type: "error",
        });
        return;
      }
      if (!this.form.address) {
        this.$refs.uToast.show({
          title: "请输入详细地址",
          type: "error",
        });
        return;
      }
      let location = this.userInfo.location
        ? JSON.parse(this.userInfo.location)
        : [];
      if (this.isEdit) {
        location.splice(this.curIndex, 1, this.form)
      } else {
        location.push(this.form);
      }
      let params = {
        ...this.userInfo,
        location: JSON.stringify(location),
      };
      updateUser(params).then((up) => {
        uni.setStorage({
          key: "userInfo",
          data: params,
          success: () => {
            this.$refs.uToast.show({
              title: "添加成功",
              type: "",
            });
            setTimeout(() => {
              uni.navigateBack({
                delta: 1,
              });
            }, 500);
          },
        });
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  background-color: #fff;
  min-height: 100vh;
  overflow: hidden;
  padding: 2rpx;
}
.block {
  padding: 20rpx;
  height: 120rpx;
  width: 100%;
  border: 1rpx solid lightgray;

  .avatar {
    width: 100%;
    width: 80rpx;
    height: 80rpx;
    margin-right: 20rpx;
  }

  .position {
    width: 20rpx;
    height: 20rpx;
  }
}
.title {
  width: 100%;
  text-align: center;
  font-weight: bold;
  margin: 40rpx 0;
  font-size: 32rpx;
}

.each-row {
  width: 100%;
  padding: 0 20rpx;
  height: 100rpx;
  line-height: 100rpx;
  border-bottom: 1rpx solid #999;
}

.content {
  padding: 30rpx;
  width: 100%;
}

.submit {
  margin: 30rpx auto;
  border: none;
  width: calc(100% - 60rpx);
  height: 86rpx;
  line-height: 86rpx;
  box-sizing: border-box;
  border-radius: 15rpx;
  background-color: #5f88ff;
  color: #ffffff;
}
.imgs {
  padding: 30rpx;

  .img {
    width: 33%;
    height: 200rpx;
  }
  .submit2 {
    background: #ff5757;
    width: 40%;
  }
}
</style>
